/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable react/jsx-key */
import { useLocation, useModel } from "umi";
import { Card, Tabs } from "antd";
import { useEffect, useMemo } from "react";
import Mcard from "./mcard";
import Mtable from "./mtable";

function isString(obj) {
  return obj.constructor === String ? true : false;
}

export default (props) => {
  let { childposition, showType } = props;
  const { pathname } = useLocation();

  childposition = childposition ?? "left";

  const Dom = showType === "card" ? Mcard : Mtable;

  const {
    initialState: { routes, miniList, menuData },
    setInitialState,
  } = useModel("@@initialState");


  const items = useMemo(() => {
    if (props.tabList) {
      return props.tabList.map((it) => {
        return {
          label: it.tab,
          key: it.key,
          children: (
            <>
              <div style={{ display: "flex", width: "100%" }}>
                {(props.childposition === "left" || !props.childposition) &&
                  props.children}
                <div
                  style={{
                    flex: 1,
                    overflow: "hidden",
                    paddingLeft: `${
                      props.childposition === "left" ? "15px" : "0"
                    }`,
                  }}
                >
                  {props.childposition === "top" && props.children}
                  <Dom {...props} iscurrent={props?.activeTabKey === it.key} />
                </div>
                {(props.childposition === "right" || !props.childposition) &&
                  props.children}
              </div>
              {props.childposition === "bottom" && props.children}
            </>
          ),
        };
      });
    }
  }, [props.tabList, props.extraparams, showType]);

  //保存actionRef 以便其他页面调用
  useEffect(() => {
    setInitialState((s) => {
      return {
        ...s,
        actionRefs: {
          ...(s.actionRefs || {}),
          [pathname]: props.actionRef,
        },
      };
    });
  }, [props.actionRef]);

  //获取 路由name

  return (
    <div className="diycard">
      {props.withCard === false ? (
        <>
          <div style={{ display: "flex", width: "100%" }}>
            {(props.childposition === "left" || !props.childposition) &&
              props.children}
            <div style={{ flex: 1, width: "100%" }}>
              {props.childposition === "top" && props.children}
              <Dom {...props} />
            </div>
            {(props.childposition === "right" || !props.childposition) &&
              props.children}
          </div>
          {props.childposition === "bottom" && props.children}
        </>
      ) : !props.tabList ? (
        <div>
          <div style={{ display: "flex", width: "100%" }}>
            {(props.childposition === "left" || !props.childposition) &&
              props.children}
            <div
              style={{
                flex: 1,
                overflow: "hidden",
                paddingLeft: `${props.childposition === "left" ? "15px" : "0"}`,
              }}
            >
              {props.childposition === "top" && props.children}
              <Dom {...props} />
            </div>
            {(props.childposition === "right" || !props.childposition) &&
              props.children}
          </div>
          {props.childposition === "bottom" && props.children}
        </div>
      ) : (
        <div className="tabstable">
          <Tabs
            items={items}
            onChange={props.onTabChange}
            destroyInactiveTabPane
            activeKey={props.activeTabKey}
          />
        </div>
      )}
    </div>
  );
};
